<section class="sign-in">
  <div class="title full-width">KITTEN CHAT</div>
  <mat-tab-group [(selectedIndex)]="tabIndex">
    <mat-tab label="验证码登录">
      <form [formGroup]="captchaForm">
        <mat-form-field appearance="standard">
          <input
            matInput
            type="email"
            required
            placeholder="your email"
            formControlName="email"
          />
          <mat-icon matPrefix>email</mat-icon>
        </mat-form-field>
        <mat-form-field appearance="standard">
          <input
            matInput
            type="number"
            required
            placeholder="your captcha code"
            formControlName="code"
          />
          <mat-icon matPrefix>security</mat-icon>
          <a
            mat-stroked-button
            matSuffix
            color="primary"
            class="button-mini"
            [disabled]="captchaBtnDisabled"
            (click)="getCaptcha()"
          >
            {{ captchaBtn }}
          </a>
        </mat-form-field>
      </form>
    </mat-tab>
    <mat-tab label="密码登录">
      <form [formGroup]="usernameForm">
        <mat-form-field appearance="standard">
          <input
            type="text"
            matInput
            placeholder="your username or email"
            formControlName="username"
          />
          <mat-icon matPrefix>person</mat-icon>
        </mat-form-field>
        <mat-form-field appearance="standard">
          <input
            matInput
            [type]="passInputType"
            placeholder="your password"
            formControlName="password"
            autocomplete="true"
          />
          <mat-icon matPrefix>lock</mat-icon>
          <button
            mat-icon-button
            matSuffix
            type="button"
            (click)="switchShowPass()"
            [attr.aria-pressed]="!showPass"
          >
            <mat-icon>
              {{ showPass ? "visibility" : "visibility_off" }}
            </mat-icon>
          </button>
          <mat-error
            *ngIf="usernameForm.controls.password.hasError('minLength')"
          >
            minLength is 6
          </mat-error>
        </mat-form-field>
      </form>
    </mat-tab>
  </mat-tab-group>
  <div class="full-width">
    <button mat-flat-button color="primary" (click)="onSignIn()">登录</button>
    <div style="display: flex">
      <button mat-button color="accent" routerLink="/auth/sign-up">
        没有帐号？
      </button>
      <button mat-button color="accent" routerLink="/auth/reset-pass">
        忘记密码？
      </button>
    </div>

    <mat-divider>扫码登录</mat-divider>
    <button mat-icon-button>
      <mat-icon style="color: #00c853">wechat</mat-icon>
    </button>
  </div>
</section>
